<template>
	<view class="wrapper">
		<view class="remark">
			<view class="form">
				<uni-forms
					:modelValue="form"
					ref="formRef"
					:label-width="80"
					:rules="rules">
					<uni-forms-item label="订单备注" name="remark" required>
						<uni-easyinput
							type="textarea"
							:inputBorder="false"
							primaryColor="#e3230e"
							v-model="form.remark"
							placeholder="请输入订单备注" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<button class="ty-button ty-button-confirm form-submit" @click="submit">确认</button>
		</view>
	</view>
</template>

<script setup>
import { computed, onMounted, ref, watch, nextTick } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'
import { orderExpress } from "@/api/app_api/order"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 表单
	const formRef = ref(null)
	const form = ref({
		remark: ''
	})
	
	// 表单验证
	const rules = ref({
		remark: {
			rules: [{
				required: true,
				errorMessage: '请输入订单备注'
			}]
		}
	})
	
	// 表单提交
	const submit = () => {
		formRef.value.validate().then(formRes => {
			uni.$emit('orderRemark', formRes)
			uni.navigateBack({
				delta: 1
			})
		})
	}
	
	onLoad((option) => {
		form.value.remark = option?.remark || ''
	})
	
</script>

<style lang="scss">
	.remark {
		padding: 20rpx;
	}
	.form {
		padding: 0rpx 32rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		&-submit {
			height: $button-height;
			padding: 0;
			margin: 0;
			margin-top: 40rpx;
			font-size: 32rpx;
		}
	}
</style>
